<template>
<!-- 我参与的社团活动; -->
    <div style="width:100%;height:100%;overflow-x:hidden;overflow-y:auto;background-color:#F8F8FF">
        <!-- 搜索框的相关内容： -->
        <div style="width:95%;margin:0 auto;margin-top:20px;height:14%" >
            <div class="panel panel-default" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);width:100%;height:100%">
                <el-col :span="8">
                    <div class="grid-content bg-purple panel-body" style="width:100%;height:100%">                          
                        <span>活动名称</span>
                        <el-input
                            placeholder="请输入内容"
                            v-model="LookUpContionBy.lookUpByAssName"
                            clearable
                            style="width:160px;margin-top:10px;margin-left:10px">
                        </el-input>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light panel-body" style="width:100%;height:100%">
                        <span>活动负责人</span>
                        <el-input
                            placeholder="请输入内容"
                            v-model="LookUpContionBy.lookUpByTopUser"
                            clearable
                            style="width:170px;margin-top:10px;margin-left:10px">
                        </el-input>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple panel-body" style="width:100%;height:100%">
                         <el-button style="margin-top:10px;margin-left:100px;width:120px" type="primary" plain @click="SearchAllAction()">搜索</el-button>
                    </div>
                </el-col>
            </div>
        </div>

        <div class="panel panel-default" style="width:95%;margin:0 auto;margin-top:50px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
            <div class="panel-heading" style="text-align:center;font-size:20px;font-weight:bold"><span>我参与的社团活动</span></div>
            <div class="panel-body"  v-for="i in lookUpAllActionByUser" :key="i.ass_id" style="overflow-x:hidden;overflow-y:auto;">
                <el-descriptions class="margin-top" :title="i.ass_action_name" :column="3"  border>
                    <template slot="extra">
                    <el-button type="primary" size="small" @click="SearchActionUser(i.ass_id,i.ass_action_name)">查看活动</el-button>
                    </template>
                    <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user"></i>
                        负责人
                    </template>
                    {{i.ass_action_user}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        活动时间
                    </template>
                    {{i.ass_action_time}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        活动状态
                    </template>
                    <span v-if="i.ass_action_status==0"><el-tag size="small">活动进行中</el-tag></span>
                    <span v-if="i.ass_action_status==1"><el-tag size="small">活动已结束</el-tag></span>
                    <span v-if="i.ass_action_status==2"><el-tag size="small">活动未开始</el-tag></span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-location-outline"></i>
                        活动地点
                    </template>
                    {{i.ass_action_place}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        负责社团
                    </template>
                    {{i.ass_name}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        活动主题
                    </template>
                    {{i.ass_action_notice}}
                    </el-descriptions-item>
                    
                </el-descriptions>
            </div>
            <div style="width:100%;height:300px;" v-if="this.lookUpAllActionByUser==null">
                <el-empty :image-size="150"></el-empty>
            </div>
        </div>


            <div class="container">
                <el-drawer
                    style="font-size:20px;font-weight:bold;text-align: center;"
                    :title="this.title"
                    :visible.sync="drawer"
                    :direction="direction"
                    :before-close="handleClose"
                    size="45%">
                    <div class="panel panel-default" style="width:95%;height:94%;">
                        <div style="width:100%;height:50%;" class="panel panel-default">
                            <div class="panel-heading">活动成员展示</div>
                            <div>
                                <el-table
                                    :data="tableDataUser"
                                    height="250"
                                    border
                                    style="width: 100%">
                                    <el-table-column
                                    prop="date"
                                    label="序号">
                                    </el-table-column>
                                    <el-table-column
                                    prop="address"
                                    label="学号">
                                    </el-table-column>
                                    <el-table-column
                                    prop="date"
                                    label="姓名"
                                   >
                                    </el-table-column>
                                    <el-table-column
                                    prop="date"
                                    label="班级"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                    prop="name"
                                    label="联系方式"
                                    >
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <div style="width:100%;height:50%;overflow-x:hidden;overflow-y:auto;" class="panel panel-default">
                            <div class="panel-heading">活动风采展示</div>
                            <div class="demo-image__lazy">
                                <el-image v-for="url in urls" :key="url" :src="url" lazy></el-image>
                            </div>
                        </div>
                    </div>
                </el-drawer>
            </div>
        
    </div>
</template>


<script>
export default {
    data(){
        return{
            tableDataUser: [{
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-08',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-07',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }],
            title:"",
            drawer: false,
            direction: 'ltr',
            LookUpContionBy:{
                stuId:this.$cookies.get('userLogin'),
                lookUpByAssName:"",
                lookUpByTopUser:""  
            },
            lookUpAllActionByUser:null,
            lookUpActionUser:[],
            urls: [
                'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
                'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
                'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
                'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
                'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
                'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
                'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
            ]
        }
    },
    created(){
        this.SearchAllAction();
    },
    methods:{
        // 查询用户参与过的社团活动;
        SearchAllAction(){  
            let _self=this;
            this.$axios.post("http://localhost:8081/user/queryAllAction",this.LookUpContionBy).then(res=>{
                this.lookUpAllActionByUser=res.data.data;
                console.log(this.lookUpAllActionByUser);
            })
        },
        // 查看活动成员     
        SearchActionUser(actionId,actionName){
            this.title=actionName;
            this.drawer=true;
            this.$axios.get("http://localhost:8081/user/queryActionUser",{
                params:{
                    actionId:actionId
                }
            }).then(res=>{
                this.lookUpActionUser=res.data.data
                console.log(this.lookUpActionUser);
            })
        }
    }
}
</script>